<template>
    <div>
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
        <el-dialog title="申请详情" width="50%" :visible.sync="dialogTableVisible" center>
            <div class="dialog_content">
                <el-scrollbar style="height:100%">
                    <div class="detail_content" v-if="detail.Content">
                        <div class="user">
                            <div class="user_img">
                                <img :src="detail.CreatedImage" alt="">
                            </div>
                            <div class="user_info">
                                <div class="name">
                                    <span class="ch">{{detail.CreatedNameCh}}</span>
                                    <span class="en">{{detail.CreatedNameEn}}</span>
                                </div>
                                <div class="prove"><i class="el-icon-s-order"></i> <span> 请假申请</span></div>
                            </div>
                        </div>
                        <div class="detail_item">
                            <span class="name">申请编号：</span>
                            <span class="text">{{detail.ApplyNo}}</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">请假开始日期：</span>
                            <span class="text">{{detail.Content.StartDate}}</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">请假结束日期：</span>
                            <span class="text">{{detail.Content.EndDate}}</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">请假小时：</span>
                            <span class="text">{{detail.Hours}} 小时</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">请假原因：</span>
                            <span class="text">{{detail.Content.Reason}}</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">请假类型：</span>
                            <span class="text">{{detail.ProcessType}}</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">上传图片：</span>
                            <span class="text">暂无上传图片</span>
                        </div>
                        <div class="detail_item">
                            <span class="name">抄送人：</span>
                            <div class="box">
                                <span class="text" v-for="(item,index) in detail.Copiers" :key="index">
                                    {{item.NameCh}}<br>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="approver_content">
                        <div class="approver_title">
                            <span>审批流程</span>
                        </div>
                        <div class="approver_item" v-for="(item,index) in Approvers" :key="index">
                            <!-- <div class="approver_time">2021-01-09 13:01:50</div> -->
                            <div class="approver_time">{{item.ModifiedTime}}</div>
                            <div class="approver_profile">
                                <div class="profile">
                                    <img :src="item.Image" alt="">
                                </div>
                                <div class="dot"></div>
                            </div>
                            <div class="approver_person">
                                <div class="person_name">{{item.NameCh+"  "+item.NameEn}}</div>
                                <div class="person_del" v-if="item.Status===0">
                                    {{'提交申请'}}
                                    <span class="icon icon_success el-icon-check"></span>
                                </div>
                                <div class="person_del" v-if="item.Status===1">
                                    {{'待审批'}}
                                    <span class="icon icon_more el-icon-more"></span>
                                </div>
                                <div class="person_del" v-if="item.Status===2">
                                    {{'已通过'}}
                                    <span class="icon icon_success el-icon-check"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  data () {
    return {
      dialogTableVisible: false,
      detail: {},
      Approvers: [

      ]
    }
  },
  methods: {
    // 获取详细信息
    async getDetail (KeyId) {
      console.log('KeyId', KeyId)
      const { data: res } = await this.$http.get(`/Process/ProcessDetail?keyId=${KeyId}`)
      this.detail = res.data
      this.detail.Hours = res.data.Hours = (res.data.Content.Minute / 60).toFixed(2)
      this.detail.Content.StartDate = res.data.Content.StartDate.replace('T', ' ')
      this.detail.Content.EndDate = res.data.Content.EndDate.replace('T', ' ')
      this.Approvers = res.data.Approvers
      var proveItem = {
        Image: this.detail.CreatedImage,
        ModifiedTime: this.detail.CreatedTime.replace('T', ' '),
        NameCh: this.detail.CreatedNameCh,
        NameEn: this.detail.CreatedNameEn,
        Status: 0
      }
      this.Approvers.unshift(proveItem)
      console.log('detail', res)
    }
  },
  created () {
    this.getDetail('5eb2d786-53c8-470d-a13b-80507ff9d6d1')
  }
}
</script>

<style lang="scss" scoped>
    /deep/.el-dialog__body{
        padding: 0;
    }
    .dialog_content{
        height: 70vh;
        font-family: 'STKaiti';
        /deep/.el-scrollbar__wrap {
            overflow-x: hidden;
        }
    }
    .detail_content{
        margin: 0 auto;
        padding-left: 10px;
        padding: 10px 15px 10px 35px;
        .user {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .user_img{
                width: 70px;
                height: 70px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 35%;
                img{
                    height: 100%;
                }
            }
            .user_info{
                font-weight: normal;
                font-size: 18px;
                .name{
                    color: #333333;
                    .ch {
                        margin-right: 15px;
                    }
                }
                .prove{
                    display: flex;
                    align-items: center;
                    color: #60e1c4;
                    .el-icon-s-order{
                        font-size: 40px;
                    }
                }
            }
        }
        .detail_item{
            display: flex;
            font-size: 18px;
            font-weight: normal;
            padding: 12px 0;
            .name {
                display: inline-block;
                color: #999999;
                width: 45%;
            }
            .box{
                height: 100px;
                // width: 200px;
            }
            .text{
                color: #333333;
            }
        }
    }
    .approver_content{
        padding: 0 20px 0 15px;
        color: #333333;
        .approver_title {
            font-size: 20px;
            border-left: 5px solid red;
            span {
                font-weight: 700;
                padding-left: 10px;
            }
        }
        .approver_item{
            display: flex;
            font-size: 18px;
            margin-bottom: 30px;
            .approver_time{
                flex: 2;
                display: flex;
                align-items: center;
                padding-left: 30px;
            }
            .approver_profile{
                flex: 2;
                display: flex;
                flex-direction: column;
                align-items: center;
                .profile{
                    width: 55px;
                    height: 55px;
                    border-radius: 50%;
                    border: 1px solid #ccc;
                    overflow: hidden;
                    margin-bottom: 18px;
                    img{
                        height: 100%;
                    }
                }
                .dot{
                    width: 12px;
                    height: 12px;
                    background-color: #bfc2c6;
                    border-radius: 50%;
                    overflow: hidden;
                }
            }
            .approver_person{
                flex: 5;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .person_name{
                    display: flex;
                    align-items: center;
                    height: 50px;
                    margin-bottom: 5px;
                }
                .person_del{
                    display: flex;
                    align-items: center;
                    height: 50px;
                    background-color: #eeeeee;
                    position: relative;
                    padding: 0 15px;
                    .icon {
                        position: absolute;
                        right: 15px;
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        overflow: hidden;
                        text-align: center;
                        line-height: 30px;
                        color: #fff;
                    }
                    .icon_more {
                        background-color: #403f46;
                    }
                    .icon_success {
                        background-color: #46c33b;
                    }
                    &::before{
                        content: " ";
                        display: block;
                        position: absolute;
                        width: 15px;
                        height: 15px;
                        background-color: #eeeeee;
                        left: 0;
                        transform: translate(-50%, 0%) rotate(45deg);
                    }
                }
            }
        }
    }
</style>
